<template>
  <div class="app-container app-container1">
    <div class="filter-container search_Top">
      <div class="search_input_list" ref="searchHeight" :style="{height: inputMore.setHeight}">
        <div class="filter-item">
          <el-select v-model="searchParam.locationId" placeholder="送样地点"
                     size="mini"
                     clearable>
            <el-option v-for="item in codeItemMap.location"
                       :key="item.id"
                       :label="item.itemName"
                       :value="item.id" />
          </el-select>
        </div>
        <div class="filter-item">
          <el-select v-model="searchParam.attrId" placeholder="方法属性"
                     size="mini"
                     clearable>
            <el-option v-for="item in codeItemMap.method_attr"
                       :key="item.id"
                       :label="item.itemName"
                       :value="item.id" />
          </el-select>
        </div>
        <div class="filter-item">
          <el-select v-model="searchParam.typeId" placeholder="检验规则"
                     size="mini"
                     clearable>
            <el-option v-for="item in codeItemMap.regular"
                       :key="item.id"
                       :label="item.itemName"
                       :value="item.id" />
          </el-select>
        </div>
        <div class="filter-item">
            <el-select v-model="searchParam.deptId" placeholder="检验组"
                       size="mini"
                       clearable>
              <el-option v-for="item in jcDept"
                         :key="item.id"
                         :label="item.deptName"
                         :value="item.id" />
            </el-select>
          </div>
        <div class="filter-item">
            <el-input clearable  v-model="searchParam.checkValue" placeholder="规则值"
                      size="mini"
                      @keyup.enter.native="getList" />
        </div>
      </div>
      <div class="filter-item filter-item-btn-search search_bt_list">
        <span class="gosearch" @click="getList">搜索</span>
        <span class="clears" @click="clearList">清除</span>
      </div>
      <div class="inputmore" @click="changeMore()" v-show="inputMore.showMore">
        <span v-if="inputMore.isMore">更多搜索 <i class="el-icon-arrow-down"></i></span>
        <span v-if="!inputMore.isMore">收起 <i class="el-icon-arrow-up"></i></span>
        <div class="triangle-bottomleft"></div>
        <div class="triangle-bottomright"></div>
      </div>
    </div>
    <div class="table_base_bt">
      <el-button class="filter-btn-item" v-if="hasRole('rule:basedata:add')"
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="addTestRule"
            >新增</el-button>
      <el-button class="filter-btn-item" v-if="hasRole('rule:basedata:del')"
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="batchDelete"
            >删除</el-button>
    </div>
    <div class="tab-container">
      <el-tabs  v-model="activeName" class="tabNav" type="border-card" @tab-click="handleClick">
        <el-tab-pane :label="item.label" :name="item.value" v-for="(item,index) in ruleArray" :key="index">
          <drug-table @getSelection="getSelection" :isMultipleSelection="true" :tableData="tableData" :tableLoading="tableLoading" :tableHeader="tableHeader" :option="option">
            <template slot-scope="props" slot="operate">
              <div >
                <label @click="handleEditData(props.rowData)"  v-if="hasRole('rule:basedata:edit')" class="table-view">
                    编辑
                </label>
                <span v-if="hasRole('rule:basedata:edit')">·</span>
                <label @click="handleDelete(props.rowData)"  v-if="hasRole('rule:basedata:del')" class="table-view">
                    删除
                </label>
              </div>
            </template>
          </drug-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <inspect :editData="editData" :type="operateType" :codeItemMap="codeItemMap"></inspect>
  </div>
</template>

<script>
import waves from '@/views/directive/waves' // waves directive
import { parseTime } from '@/utils'
import drugTable from "@/components/table/index";
import inspect from "./dialog/inspect";
export default {
  components: { drugTable ,inspect},
  directives: { waves },
  data() {
    return {
      inputMore: { isMore: true,showMore: true,liConHeight: 36,setHeight: 36,},
      totalData:[],
      tableData: [],
      tableHeader:[],
      tableLoading:true,
      option:{showOperate:true},
      selectChoice:[],
      searchParam:{locationId:"",attrId:"",typeId:"",deptId:"",checkValue:""},
      codeItemMap:{location:[],method_attr:[],regular:[],dept:[],type:[],scope:[],grade:[]},
      operateType:"add",
      editData:{},
      ruleArray:[ {label:"规则一",value:"1"},
                  {label:"规则二",value:"2"},
                  {label:"规则三",value:"3"},
                  {label:"规则四",value:"4"},
                  {label:"规则五",value:"5"},
                  {label:"规则六",value:"6"}],
      activeName:"1",
      jcDept:[]
    }
  },
  mounted() {
    let self = this;
    self.$eventBus.$on("updateRuleList",function () {
      self.getList();
    });
    this.getList();
    this.getDeptList();
    this.getItemCode();
    self.changeMore()
  },
  methods: {
    changeMore() {
        let liCon = this.$refs.searchHeight
        let height = liCon.offsetHeight
        if(height == this.inputMore.liConHeight) {
            this.inputMore.isMore = false
            liCon.style.height = 'auto'
            height = liCon.offsetHeight
            this.inputMore.setHeight = height + 'px'
        }else {
            this.inputMore.isMore = true
            this.inputMore.setHeight = this.inputMore.liConHeight + 'px'
        }
        if(this.inputMore.setHeight == '36px' && !this.inputMore.isMore) {
            this.inputMore.showMore = false
        }
    },
    handleClick(){
      let tableData = [];
      for(let data of this.totalData){
        if(data.serialType == this.activeName){
          tableData.push(data);
        }
      }
      this.tableData = tableData;
    },
    getList() {
      let self = this;
      self.tableLoading = true;
      self.$http({
        url: "/drug/rule/queryRuleList",
        method: "post",
        params:self.searchParam
      }).then(resp => {
        if (resp.success) {
          self.tableLoading = false;
          self.totalData = JSON.parse(JSON.stringify(resp.result));
          let tableData = [];
          for(let data of resp.result){
            if(data.serialType == self.activeName){
              tableData.push(data);
            }
          }
          self.tableData = tableData;
          self.tableHeader =  [{"columnName": "serialNo", "coloumNameCn": "等级","width":"60px"},
            {"columnName": "location", "coloumNameCn": "送样地点"},
            {"columnName": "attrName", "coloumNameCn": "方法属性"},
            {"columnName": "typeName", "coloumNameCn": "检验规则"},
            {"columnName": "checkValue", "coloumNameCn": "规则值"},
            {"columnName": "deptNames", "coloumNameCn": "检验组"}];
          self.option.showOperate = true;
        }
      });
    },
    clearList(){
      let self = this;
      for(let key in self.searchParam){
        self.searchParam[key] = "";
      }
      self.getList()
    },
    getSelection(val){
      this.selectChoice = val;
    },

    handleEditData(rowData){
      this.editData =Object.assign({},rowData);
      this.operateType = "edit";
    },
    addTestRule(){
      this.editData ={serialType:this.activeName,locationId:"",attrId:"",typeId:"",checkValue:"",jcDeptIds:[],syDeptIds:[]};
      this.operateType = "add";
    },
    batchDelete(){
      let param = {ids:[]};
      for(let data of this.selectChoice){
        param.ids.push(data.id);
      }
      this.deleteRow(param);
    },

    handleDelete(rowData){
      let param = {ids:[rowData.id]}
      this.deleteRow(param);
    },
    getItemCode() {
      let self = this;
      self.codeItemMap = {location:[],method_attr:[],regular:[],dept:[],type:[],scope:[],grade:[]};
      self.$http({
        url: "/drug/codeItem/queryCodeItemList",
        method: "post",
      }).then(resp => {
        if (resp.success) {
          for(let data of resp.result){
            if(self.codeItemMap.hasOwnProperty(data.itemCode)){
              self.codeItemMap[data.itemCode].push(data);
            }
          }
        }
      });
    },
    deleteRow(param) {
      let self = this;
      if(!param || param.ids.length < 1){
        self.$notify({
          title: '提示',
          message: "至少选择一条记录！",
          type: 'warning'
        });
        return
      }
      self.$confirm('确定删除该信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self.$http({
          url: "/drug/rule/deleteTestRule",
          method: "post",
          data: JSON.stringify(param),
          dataType: 'json',
          contentType: "application/json",
        }).then(resp => {
          if (resp.success) {
            self.getList();
            self.$notify({
              title: '提示',
              message: "删除成功！",
              type: 'success'
            });
            return
          }
          self.$notify({
            title: '提示',
            message: "操作失败，请联系管理员！",
            type: 'error'
          });
        });
      });
    },
    getDeptList() {
      let self = this;
      self.$http({
        url: "/drug/dept/queryDeptChooseList",
        method: "post",
      }).then(resp => {
        if (resp.success) {
          if(resp.result.length > 0){
            self.codeItemMap.dept = resp.result;
            self.jcDept = resp.result.filter(item => { return (item.deptType == '2'||item.deptType == '3')});
          }
        }
      });
    },
  }
}
</script>


<style lang="scss" scoped>
.app-container1 {
    padding: 15px 0px;
    .filter-container.search_Top{
        margin: 0 15px 0px 15px;
    }
    .table_base_bt {
        padding: 15px 30px;
    }
    .cell_over.drugTable {
        margin: 15px;
    }
}
.el-form-no {
  text-align: right;
  font-size: 18px;
  color: #cb0000;
}

.el-dialog .el-button--primary {
  background-color: #2e827f;
  border-color: #2e827f;
    border-radius: 3px;
    padding: 5px 10px;
}

.el-dialog-dep {
  border: solid 1px #2e827f;
  overflow: auto;
  margin-top: 3px;
  padding: 10px 10px 10px 30px;
  height: 100px;
  border-radius: 4px;
  .el-checkbox {
    width: 90px;
  }
}

.el-dialog-group {
  display: flex;
  flex-direction: row;
  color: #878989;
  font-size: 13px;
  margin-bottom: 10px;
}
</style>
